<template>
  <header>
    <div class="layout">
      <ul class="logos">
        <li>
          <img src="../../assets/img/logo1.png" alt="" @click="toDetail('/index','0')" />
        </li>
        <li>
          <img src="../../assets/img/logo2.png" alt="" />
        </li>
        <li>
          <img src="../../assets/img/logo3.png" alt="" />
        </li>
      </ul>
      <ul class="nav">
        <li v-for="(item) in footer_routes" :key="item.id" :class="preActiveId==item.id?'menu-active':'nav_item'">

          <span @click="item.router?toDetail(item.router,item.id):null">{{ item.title }}</span>
          <ul class="second_menu" v-if="item.list">
            <li v-for="(itm) in item.list" :key="itm.id" @click="toDetail(itm.router,itm.id,itm.urlName?itm.urlName:null,itm.urlName?item.id:null)" :class="itm.id===activeId?'active':null">{{ itm.title}}</li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
</template>
<script>
import Vue from "vue";
import {
  toRefs,
  getCurrentInstance,
  reactive,
  onMounted,
  ref,
  watch
  // shallowRef
} from "vue";
// import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "Header",

  setup() {
    const { proxy } = getCurrentInstance();

    const router = useRouter();
    const route = useRoute();
    let dataObj = reactive({
      preActiveId: window.localStorage.getItem("preActiveId")
        ? window.localStorage.getItem("preActiveId")
        : "0", //前缀
      activeId: window.localStorage.getItem("activeId")
        ? window.localStorage.getItem("activeId")
        : "0",
      footer_routes: [
        {
          title: "首页",
          id: "0",
          router: "/index"
        },

        {
          title: "关于我们",
          id: "1",
          list: [
            {
              router: "/information",
              title: "北京外国语大学",
              id: "1-1",
              urlName: "bfsu"
            },
            {
              router: "/information",
              title: "国际商学院",
              id: "1-2",
              urlName: "ibs"
            },
            {
              router: "/information",
              title: "愿景使命",
              id: "1-3",
              urlName: "vision"
            },
            {
              router: "/information",
              title: "院长致辞",
              id: "1-4",
              urlName: "dean_speech"
            },
            {
              router: "/information",
              title: "资质认证",
              id: "1-5",
              urlName: "cert"
            },
            {
              router: "",
              title: "新闻咨询",
              id: "1-6"
            },
            {
              router: "",
              title: "联系我们",
              id: "1-7"
            }
          ]
        },
        {
          title: "项目介绍",
          id: "2",
          list: [
            {
              title: "商学+艺术1+3预科项目",
              router: "/information",
              id: "2-1"
            },
            {
              title: "冬夏令营项目",
              router: "",
              id: "2-2"
            }
          ]
        },
        {
          title: "招生录取",
          id: "3",
          list: [
            {
              title: "招生简章",
              router: "/information",
              id: "3-1"
            },
            {
              title: "申请流程",
              router: "/information",
              id: "3-2"
            },
            {
              title: "招生活动",
              router: "",
              id: "3-3"
            }
          ]
        },
        {
          title: "学术架构",
          id: "4",
          list: [
            {
              title: "培养体系",
              router: "/overview",
              id: "4-1"
            },
            {
              title: "招收专业",
              router: "/major",
              id: "4-2"
            },
            {
              title: "课程设置",
              router: "/information",
              id: "4-3"
            },
            {
              title: "师资团队",
              router: "",
              id: "4-4"
            },
            {
              title: "对接大学",
              router: "",
              id: "4-5"
            },
            {
              title: "学术论坛",
              router: "",
              id: "4-6"
            }
          ]
        },
        {
          title: "作品展示",
          id: "5",
          list: [
            {
              title: "时尚管理/奢侈品管理/时尚营销/时尚传播与造型",
              router: "",
              id: "5-1"
            },
            {
              title: "动画设计/游戏设计/交互设计",
              router: "",
              id: "5-2"
            },
            {
              title: "视觉传达/插画/平面设计",
              router: "",
              id: "5-3"
            },
            {
              title: "艺术摄影/时尚摄影",
              router: "",
              id: "5-4"
            },
            {
              title: "传媒/文化产业",
              router: "",
              id: "5-5"
            },
            {
              title: "校园杂志",
              router: "",
              id: "5-6"
            }
          ]
        },
        {
          title: "学生生活",
          id: "6",
          list: [
            {
              title: "图解校园",
              router: "/information",
              id: "6-1"
            },
            {
              title: "社团活动",
              router: "",
              id: "6-2"
            },
            {
              title: "社会实践",
              router: "",
              id: "6-3"
            },
            {
              title: "讲座沙龙",
              router: "",
              id: "6-4"
            },

            {
              title: "学生大使",
              router: "",
              id: "6-5"
            }
          ]
        },
        {
          title: "发展前景",
          id: "7",
          list: [
            {
              title: "历年录取",
              router: "/information",
              id: "7-1"
            },
            {
              title: "校友访谈",
              router: "",
              id: "7-2"
            },
            {
              title: "职业规划",
              router: "/information",
              id: "7-3"
            }
          ]
        }
      ]
    });
    // watch(
    //   () => window.localStorage.getItem("preActiveId"),
    //   (newVal, oldVal) => {
    //     debugger;
    //     // 监听路由参数的变化
    //     if (newVal !== oldVal) {
    //       dataObj.preActiveId = newVal;
    //       // console.log("参数id变化了：", route.query.urlName);
    //     }

    //     // 你可以在这里根据id做相应的处理
    //   }
    // );
    // window.addEventListener("setItemEvent", function (e) {
    //   // 这里的info是我存入localstorage的key值
    //   if (e.key === "activeId") {
    //     dataObj.activeId = e.preActiveId;
    //     // console.log('##', e.newValue)
    //     // 如果发生变化的e.key=想要监听的key值，则执行需要的操作
    //     // e.newValue是变化后的值
    //   }
    // });
    // window.addEventListener("setItemEvent", function (e) {
    //   // 这里的info是我存入localstorage的key值
    //   if (e.key === "activeId") {
    //     dataObj.activeId = e.newValue;
    //     // console.log('##', e.newValue)
    //     // 如果发生变化的e.key=想要监听的key值，则执行需要的操作
    //     // e.newValue是变化后的值
    //   }
    // });
    // watch(
    //   () => window.localStorage.getItem("activeId"),
    //   (newVal, oldVal) => {
    //     debugger;
    //     // 监听路由参数的变化
    //     if (newVal !== oldVal) {
    //       dataObj.activeId = newVal;
    //       // console.log("参数id变化了：", route.query.urlName);
    //     }

    //     // 你可以在这里根据id做相应的处理
    //   }
    // );
    const toDetail = (path, activeId = "0", urlName, preActiveId) => {
      if (activeId == "0") {
        dataObj.preActiveId = "0";
        dataObj.activeId = "0";
        window.localStorage.setItem("activeId", "0");
        window.localStorage.setItem("preActiveId", "0");
      } else {
        var preActiveId = activeId.split("-")[0];
        dataObj.preActiveId = preActiveId;
        dataObj.activeId = activeId;
        window.localStorage.setItem("activeId", activeId);
        window.localStorage.setItem("preActiveId", preActiveId);
      }
      if (urlName) {
        router.push({ path: path, query: { urlName, preActiveId, activeId } });
      } else {
        router.push({ path: path });
      }
    };
    onMounted(() => {
      window.addEventListener("setItemEvent", function (e) {
        // 这里的info是我存入localstorage的key值
        if (e.key === "preActiveId") {
          dataObj.preActiveId = e.newValue;
          // console.log('##', e.newValue)
          // 如果发生变化的e.key=想要监听的key值，则执行需要的操作
          // e.newValue是变化后的值
        }
      });
      window.addEventListener("setItemEvent", function (e) {
        debugger;
        // 这里的info是我存入localstorage的key值
        if (e.key === "activeId") {
          dataObj.activeId = e.newValue;
          // console.log('##', e.newValue)
          // 如果发生变化的e.key=想要监听的key值，则执行需要的操作
          // e.newValue是变化后的值
        }
      });
    });
    return {
      ...toRefs(dataObj),
      toDetail
    };
  }
};
</script>
<style scoped lang="scss">
header {
  position: fixed;
  top: 0;

  z-index: 99999;
  width: 1200px;
  width: 100%;
  background: rgba(51, 51, 51, 0.5);

  .layout {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    // height: 64px;
    align-items: center;
    // padding-right: 103px;
    margin: 0 auto;

    .logos {
      display: flex;
      height: 100%;
      align-items: center;
      li {
        margin-right: 20px;
        cursor: pointer;
      }
      li:first-child {
        img {
          width: 122px;
          height: 28px;
          display: block;
        }
      }
      li:nth-child(2) {
        img {
          width: 83px;
          height: 28px;
          display: block;
        }
      }
      li:nth-child(3) {
        img {
          width: 83px;
          height: 28px;
          display: block;
        }
      }
    }
    .nav {
      height: 64px;
      display: flex;
      align-items: center;

      .nav_item {
        width: 60px;
        height: 64px;
        margin: 0 15px;
        line-height: 20px;
        display: flex;
        align-items: center;
        position: relative;
        span {
          width: 100%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: rgba(225, 225, 225, 0.7);
          line-height: 20px;
          // text-align: left;
          cursor: default;
          font-style: normal;
          text-align: center;
        }

        .second_menu {
          transform: scaleY(0) translateX(-50%); /* 移动元素本身50% */
          transform-origin: 0 0;
          transition: transform 0.2s linear;
          position: absolute;
          background: #fff;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
          border-radius: 0 0 6px 6px;
          overflow: hidden;
          padding: 22px 0;
          min-width: calc(100% + 80px);
          width: auto;
          top: 64px;
          left: 50%;
          li {
            cursor: pointer;
            padding: 0 20px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            letter-spacing: 0.14px;
          }
        }
      }

      .nav_item:before {
        content: "";
        width: calc(100% + 30px);
        height: 3px;
        background: #ff6b19;
        position: absolute;
        left: -15px;
        bottom: 0;

        transform: scaleX(0);
        transition: 0.3s;
      }

      .nav_item:hover:before {
        transform: scaleX(1);
      }

      .nav_item:hover .second_menu {
        transform: scaleX(1) translateX(-50%); /* 移动元素本身50% */
      }
      .menu-active {
        width: 60px;
        height: 64px;
        margin: 0 15px;
        line-height: 20px;
        display: flex;
        align-items: center;
        position: relative;
        span {
          width: 100%;
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;

          cursor: default;
          font-style: normal;

          color: #ff6b19;
        }

        .second_menu {
          transform: scaleY(0) translateX(-50%); /* 移动元素本身50% */
          transform-origin: 0 0;
          transition: transform 0.2s linear;
          position: absolute;
          background: #fff;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
          border-radius: 0 0 6px 6px;
          overflow: hidden;
          padding: 22px 0;
          min-width: calc(100% + 80px);
          width: auto;
          top: 64px;
          left: 50%;
          li {
            cursor: pointer;
            padding: 0 20px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            letter-spacing: 0.14px;
          }
          .active {
            color: #ff6b19;
          }
        }
      }

      .menu-active:before {
        content: "";
        width: calc(100% + 30px);
        height: 3px;
        background: #ff6b19;
        position: absolute;
        left: -15px;
        bottom: 0;

        transform: scaleX(1);
        transition: 0.3s;
      }
      .menu-active:hover .second_menu {
        transform: scaleX(1) translateX(-50%); /* 移动元素本身50% */
      }
      .second_menu li:hover {
        color: #ff6b19;
      }
    }
  }
}
</style>
